<template>
	<Layout :class="'bg-white p-2'">
		<Layout :class="'bg-white'">
			<Table border :class="'m-1'" :columns="tableInfo.columnInfo" :data="tableInfo.data">
				<!-- <template slot-scope="{ row, index }" slot="status">
					<span v-if="row.statu">开</span>
					<span v-else>关</span>
				</template> -->
				<template slot-scope="{ row, index }" slot="action">
					<Button type="primary" size="small" style="margin-right: 5px"
						@click="show(row.orderTypeId)">详细</Button>
				</template>
			</Table>
		</Layout>
	</Layout>
</template>

<script>
	export default {
		data() {
			return {
				method: "",
				tableInfo: {
					columnInfo: [{
							title: "编号",
							key: "orderTypeId",
						},
						{
							title: "价格/元",
							key: "price",
						},
						{
							title: "类型名字",
							key: "typeName",
						},
						{
							title: "操作",
							slot: 'action',
							width: 150
						}
					],
					data: [],
				}
			};
		},
		methods: {
			init: function() {
				this.search();
			},
			show: function(orderTypeId) {
				this.$router.push({
					name: "payCost_detail",
					params: {
						orderTypeId
					}
				});
			},
			search: function() {
				let self = this;
				this.http.get({
					url: "pay-cost/list",
				}).then(data => {
					let prices = data;
					for (var i = 0; i < data.length; i++) {
						prices[i].price = prices[i].price / 100;
					}
					this.$data.tableInfo.data = prices;
				});
			},
		},
		created: function() {
			this.init();
		},
	}
</script>

<style>
	.el-dropdown-link {

		cursor: pointer;
		color: #409EFF;
	}

	.el-icon-arrow-down {
		font-size: 12px;
	}

	.el-button--primary {
		color: #000;
		background-color: #fff;
		border-color: lightgray;
		margin-left: 10px;
	}
</style>
